<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- 生产环境版本，优化了尺寸和速度 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->

<!-- 本地版本，引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <!-- <p>Computed reversed message: "{{ reversedMessage }}"</p> -->
    <p>Reversed message: "{{ reversedMessage() }}"</p>
</div>

    <script>
    var vm = new Vue({
            el: '#example',
            data: {
                message: 'Hello'
            },
            // 在组件中
        methods: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        },
            // computed: {
            //     // 计算属性的 getter
            //     reversedMessage: function () {
            //         // `this` 指向 vm 实例
            //         return this.message.split('').reverse().join('')
            //     }
            // }
        })

    </script>

</body>

</html>